<script setup lang="ts">
import keywordTitle from '@/components/KeywordTitle/index.vue'
import type { GoodsInfoResult } from '@/api/details/types'

const goodsInfo = inject<Ref<GoodsInfoResult>>('goodsInfo')

</script>

<template>
    <div class="framing">
        <keywordTitle title="应用展示" />
        <div class="framing-content">
            <div v-for="(item, index) in goodsInfo?.list" :key="index">
                <img :src="item" alt="应用展示图">
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.framing {
    grid-area: framing;
    margin-top: 30px;

    .framing-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 10px;

        div {
            height: 238px;
            background-color: #f5f4f8;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}
</style>
